<template>
  <div>
    <dtDialog
      title="应用Topic列表"
      :visible.sync="appTopicVisible"
      :is-loading="loading"
      :footer-slot="true"
      @closeDialog="handleCancel"
    >
      <div style="display:flex;justify-content: space-between;margin-bottom:10px">
        <el-input v-model="queryParams.appName" placeholder="输入搜索应用名称" style="width:200px"
                  clearable @blur="getAppTopicPage" @keyup.enter.native="getAppTopicPage" />
        <el-button type="primary" @click="topicConfig">配置Topic</el-button>
      </div>
      <dt-table
        :table-opts="tableOpts"
        :is-show-column="false"
        :pagination-data="{
          total:total,
          queryParams:queryParams
        }"

        :is-column-search="false"
        @pagination="pagination"
      />
    </dtDialog>
    <topic-config ref="topicConfigRef" />
  </div>
</template>
<script>
import dataSynchronizationApi from '@/framework/api/datasync/dataSynchronization'
import topicConfig from './topicConfig.vue'

export default {
  components: { topicConfig },
  data() {
    return {
      loading: false,
      appTopicVisible: false,
      queryParams: {
        pageSize: 10,
        pageNo: 1,
        appName: ''
      },
      tableOpts: {
        indexTableCol: {
          label: '序号',
          width: 70
        },
        firstTableCol: {
          select: false
        },
        tableCol: [
          {
            prop: 'appName',
            label: '应用名称',
            show: true
          },
          {
            prop: 'appCode',
            label: '应用编码',
            show: true
          },
          {
            prop: 'topic',
            label: 'Topic',
            show: true
          }
        ],
        operator: {
          width: 150,
          operatorBtn: [
            {
              text: '修改',
              permission: ['TASKMANAGEMENT_UPDATETOPIC_BUTTON'],
              size: 'small',
              click: (row, col, cellValue) => { return this.editPositionInfo(row) }
            },
            {
              text: '删除',
              permission: ['TASKMANAGEMENT_DELETETOPIC_BUTTON'],
              size: 'small',
              click: (row, col, cellValue) => { return this.removePosition(row) }
            }
          ]
        },
        tableData: []
      },
      total: 0
    }
  },
  watch: {
    'queryParams.appName': {
      handler(n, o) {
        this.getAppTopicPage()
      }
    }
  },
  methods: {
    openDialog() {
      this.appTopicVisible = true
      this.getAppTopicPage()
    },
    handleCancel() {
      this.queryParams = {
        pageSize: 10,
        pageNo: 1,
        appName: ''
      }
    },
    pagination() {
      this.getAppTopicPage()
    },
    topicConfig() {
      this.$refs.topicConfigRef.openDialog('', 'create')
    },
    getAppTopicPage() {
      dataSynchronizationApi.appTopicPage(this.queryParams).then((res) => {
        this.tableOpts.tableData = res.data.rows
        this.total = res.data.totalRows
      })
    },
    editPositionInfo(row) {
      this.$refs.topicConfigRef.openDialog(row, 'update')
    },
    removePosition(row) {
      dataSynchronizationApi.deleteTopic({ id: row.id }).then((res) => {
        this.$dtMessage({
          title: '成功',
          message: '删除成功',
          type: 'success',
          duration: 2000
        })
        this.getAppTopicPage()
      })
    }
  }
}
</script>
